<template>
  <div class="body">
    <div class="bg">
      <div class="cloud_one" />
      <div class="cloud_two" />
      <div class="cloud_three" />
    </div>
   <div>
    <div class="logobox">
      <img class="logo" src="http://power.applinzi.com/wangyuan/static/img/wlsl_logo.png" alt="">
    </div>
    <div class="txt">山西省林草业网络医院</div>
    <div class="txt2">重大林草生物灾害监测预警智慧云服务平台</div>
   </div>
    <div class="inputBox">
      <el-form :model="form"   :rules="rules" ref="ruleForm" label-width="80px">
  <el-form-item label="账号：" prop="account">
    <el-input class="inputs" v-model="form.account"></el-input>
  </el-form-item>
  <el-form-item label="密码：" prop="password">
    <el-input class="inputs" v-model="form.password"></el-input>
  </el-form-item>
  </el-form>
  <div class="logotxt">{{num}}秒后进入网院主界面</div>
  <el-button type="success" @click="getUserList" class="logobtn">点击登录</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        account: '18306039510',
        password: '039510'
      },
      rules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
        ]
      },
      num: 20,
      times: ''
    }
  },
  created () {
    this.getId()
  },
  methods: {
    // 获取id
    getId () {
      this.$store.dispatch('setUserID')
    },
    // 登录接口
    getUserList () {
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) return false
        await this.$store.dispatch('setUserToken', {
          account: this.form.account,
          password: this.form.password
        })
        this.$message.success('登录成功！')
        this.$router.push('/')
      })
    },
    start () {
      this.times = setInterval(() => {
        this.num--
        if (this.num === 0) {
          clearInterval(this.times)
          this.$refs.ruleForm.validate(async (valid) => {
            if (!valid) return false
            await this.$store.dispatch('setUserToken', {
              account: this.form.account,
              password: this.form.password
            })
            this.$message.success('登录成功！')
            this.$router.push('/')
          })
        }
      }, 1000)
    }
  },
  mounted () {
    this.start()
  }
}
</script>

<style lang="less" scoped>
.inputBox{
  width: 30%;
  height: 200px;
  margin: auto;
}
.body{
  padding-top: 10%;
  width: 100%;
  height: 100vh;
  background: url(http://power.applinzi.com/wangyuan/static/img/bg.jpg) no-repeat;
  background-position: center;
  background-size:cover;
  // background-color: $bg;
  overflow: hidden;

}
.txt{
  font-size: 60px;
  font-weight: 900;
  color: #2a6419;
  text-align: center;

}
.txt2{
  font-size: 20px;
  color: #2a6419;
  text-align: center;
  font-weight: 900;
  margin-bottom: 20px;
}
.logobtn{
  float: right;
  // width: 100%;
}
.logotxt{
  float: left;
  margin-left: 30%;
  line-height: 40px;
  font-size: 18px;
  // text-align: center;
}
:deep(.el-input__inner) {
  background-color: #a3c5d3 !important;
  opacity: 0.9;
  border: 0;
}
.logobox{
  transform: translate(50%);
  margin-left: -180px;
}
.logo{
  width: 180px;
}
.bg .cloud_one{
            width: 300%;
            height: 100%;
            background: url(../../assets/yun/yun1.png);
            background-size:contain;
            position: fixed;
            top:-60%;
            left: 0;
            animation: cloud 10s linear infinite ;
        }
        .bg .cloud_two{
          background: url(../../assets/yun/yun2.png);
          background-size:contain;
            width: 300%;
            height: 100%;
            position: fixed;
            top: -60%;
            left: 0;
            animation: cloud 15s linear infinite ;
        }
        .bg .cloud_three{
          background: url(../../assets/yun/yun3.png);
          background-size:contain;
            width: 300%;
            height: 100%;
            position: fixed;
            top: -60%;
            left: 0;
            animation: cloud 20s linear infinite ;
        }
        @keyframes cloud{
            from{
                left: 0;
            }
            to{
                left: -200px;
            }
        }
</style>
